<template>
  <div class="container">
    <div class="nav">
      <span style="font-size: 16px" class="iconfont icon-fanhui"></span>
      <span style="font-size: 22px" class="iconfont icon-more"></span>
    </div>
    <div class="banner">
      <img src="../assets/100.jpg" alt="" />
      <div class="list">
        <div class="name">
          <p>哈密瓜哈哈</p>
          <div
            style="font-size: 33px; color: #999"
            class="iconfont icon-wenzhang"
          ></div>
        </div>
        <div class="location">江西景德镇</div>
      </div>
    </div>
    <div class="detail">
      <div class="total">
        <p>总文章数</p>
        <div class="total-pen">
          <span
            style="font-size: 25px; color: #999"
            class="iconfont icon-ziliaoku"
          ></span>
          <div class="p">20</div>
        </div>
      </div>
      <div class="total">
        <p>获赞</p>
        <div class="total-pen">
          <span
            style="font-size: 25px; color: #999"
            class="iconfont icon-good"
          ></span>
          <div class="p">20</div>
        </div>
      </div>
    </div>
    <div class="bottomlist">
      <div class="list">
        <span
          style="font-size: 22px; color: #999"
          class="iconfont icon-caidan2"
        ></span>
        <p>文章管理</p>
      </div>
      <div class="list">
        <span
          style="font-size: 22px; color: #999"
          class="iconfont icon-xingqiu"
        ></span>
        <p>分类管理</p>
      </div>
      <div class="list">
        <span
          style="font-size: 22px; color: #999"
          class="iconfont icon-guanyuwomen"
        ></span>
        <p>关于我</p>
      </div>
      <div class="list">
        <span
          style="font-size: 22px; color: #999"
          class="iconfont icon-exit-full"
        ></span>
        <p>退出登入</p>
      </div>
    </div>
    <van-button @click="add" type="success">saddsa</van-button>
  </div>
</template>

<script setup>
import { showToast } from 'vant'
import { showNotify } from 'vant'
const add = () => {
  console.log('add')
  showToast('add')
  showNotify({ type: 'success', message: '通知内容' })
}
</script>

<style scoped>
.container {
  /* padding: 1.2rem; */
}
.container .nav {
  padding: 1.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.banner {
  width: 100%;
  padding-bottom: 10px;
  display: flex;
  align-items: center;
}
.banner img {
  padding: 0.5rem;
  width: 85px;
  height: 85px;
  border-radius: 50%;
}
.banner .name {
  display: flex;
  align-items: center;
  padding-bottom: 5px;
}
.banner .name p {
  padding: 0;
  margin: 0;
  font-size: 20px;
  font-weight: 500;
}
.banner .location {
  padding-left: 10px;
  font-size: 15px;
  color: #999;
}
.container .detail {
  width: 100%;
  display: flex;
  justify-content: space-around;

  border-radius: 35px;
}
.container .detail .total {
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.container .detail .total p {
  color: #999;
  font-size: 18px;
}
.container .detail .total .total-pen {
  display: flex;
  align-items: center;
}
.container .detail .total .total-pen .p {
  padding-left: 5px;
}
/* bottomlist list */

.bottomlist {
  padding: 1rem;
}
.bottomlist .list {
  width: 100%;
  display: flex;
  justify-content: start;
  align-items: center;
  border-bottom: 1px solid #ccc;
}
.bottomlist .list p {
  padding-left: 5px;
}
</style>
